import React, { memo, ReactNode, useEffect } from 'react'
import { useAppSelector, useAppDispatch, shallowEqualApp } from '@/store'
import { SettleSingerWrapper } from './style'
import SectionHeaderV2 from '@/components/section-header-v2'
import { fetchSettleSingerAction } from '../../store/recommend'
import { getImageSize } from '@/utils/format'

interface IProps {
  children?: ReactNode
}

const SettleSinger: React.FC<IProps> = () => {
  const dispatch = useAppDispatch()
  const { settleSingers } = useAppSelector(
    (state) => ({
      settleSingers: state.recommend.settleSingers
    }),
    shallowEqualApp
  )
  useEffect(() => {
    dispatch(fetchSettleSingerAction())
  }, [])
  return (
    <SettleSingerWrapper>
      <SectionHeaderV2
        title="入驻歌手"
        moreLink="#/discover/artist"
        moreText="查看全部 &gt;"
      ></SectionHeaderV2>
      <div className="artists">
        {settleSingers.map((singer) => {
          return (
            <div className="item" key={singer.id}>
              <img
                src={getImageSize(singer.picUrl, 80, 80)}
                alt={singer.img1v1Id_str}
              />
              <a className="info" href="#/discover/artist">
                <div className="name">{singer.name}</div>
                <div className="desc">{singer.alias.join(' ')}</div>
              </a>
            </div>
          )
        })}
      </div>
      <div className="apply-for">
        <a
          href="https://music.163.com/st/musician"
          rel="noopener noreferrer"
          target="_blank"
        >
          申请成为网易音乐人
        </a>
      </div>
    </SettleSingerWrapper>
  )
}

export default memo(SettleSinger)
